<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="renderer" content="webkit">
    <title>大众之旅</title>
    <link href="/static/home/css/normalize.css" rel="stylesheet">
    <link href="/static/home/css/bootatrap/bootstrap.min.css" rel="stylesheet">
    <link href="/static/home/css/mixin.css" rel="stylesheet">
    <link href="/static/home/css/style.css" rel="stylesheet">
    <link href="/static/home/css/swiper.min.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
        }

        .gallery-top {
            height: 80%;
            width: 100%;
        }

        .gallery-thumbs {
            position: relative;
            height: 20%;
            box-sizing: border-box;
            padding: 10px 40px;
        }

        .gallery-thumbs .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.8;
            border: 1px solid #e3e3e3;
        }

        .gallery-thumbs .swiper-slide-thumb-active {
            opacity: 1;
            border: 1px solid #e25d22;
        }

        .swiper-button-black {
            position: absolute;
            top: 25px;
            width: 40px;
            height: 72px;
            background-color: #fff;
        }

        .swiper-button-next {
            right: 0;
        }

        .swiper-button-prev {
            left: 0;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header class="boder_bn">
        <div class="top">
            <div class="typearea">
                <div class="fl">
                    <span>欢迎来到大众之旅!</span>
                    <a href="{:url('login/login')}" class="login_ing"><span class="ml_15 color_o">请登录</span></a>
                    <a href="{:url('login/register')}" class="login_ing"><span class="ml_15">会员注册</span></a>
                    <a class="login_ed"><span class="ml_15 color_o">{if $Think.session.userinfo.username}{$Think.session.userinfo.username}{else}{$Think.session.userinfo.phone}{/if}</span></a>
                    <a class="login_ed login_out" style="cursor:pointer;"><span class="ml_15">退出!</span></a>
                </div>
                <div class="fr">
                    <a href="{:url('my/my')}#order"><span>我的订单</span></a>
                    <a href="{:url('my/my_cart')}"><span class="ml_30">我的购物车</span></a>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="typearea">
                <div class="fl">
                    <img class="logo_img" src="/static/home/img/logo.png" alt="">
                </div>
                <div class="fr">
                    <div class="search input-group">
                        <input type="text" class="form-control" name="keyword">
                        <div class="search_btn btn-group">
                            <a id="search" class="btn">
                                <img src="/static/home/img/s.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- <div class="mycart">
                        <img src="/static/home/img/cart.png" alt="">
                        <span>我的购物车(0)</span>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="typearea">
                <div class="fl">
                    <!-- Single button -->
                    <div class="btn-group">
                        <div class="all_product">
                            <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                全部商品分类 <span class="caret"></span>
                            </div>
                            <ul class="dropdown-menu" style="height:unset;">
                                {foreach $cates as $key=>$value }
                                    <li>
                                        <a href="{:url('product/product')}?c_id={$value.id}">
                                            <div class="fl">
                                                <p>{$value.catename}</p>
                                                <p class="gray">{$value.intro}</p>
                                            </div>
                                            <span class="glyphicon glyphicon-menu-right fr"></span>
                                        </a>
                                    </li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="fr">
                    <ul>
                        <li><a href="{:url('index/index')}">商城首页</a></li>
                        <li><a href="{:url('product/product')}">农副产品</a></li>
                        <li><a href="{:url('scenic/scenic')}?flag_type=0">景区门票</a></li>
                        <li><a href="{:url('scenic/scenic')}?flag_type=2">免费景区</a></li>
                        <li><a href="{:url('product/product')}?discount=1">折扣专区</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div class="scenicDetail">
        <div class="crumbs">
            <div class="typearea">
                <ol class="breadcrumb">
                    <li><a href="scenic.html">景区门票</a></li>
                    <li class="active">优选景区</li>
                    <input type="hidden" name="id" value="{$id}">
                </ol>
            </div>
        </div>
        <div class="typearea">
            <div class="content">
                <!-- 轮播图 -->
                <div class="left">

                    <!-- Swiper -->
                    <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            {foreach $spotDetail.imgs as $key=>$value }
                            <div class="swiper-slide" style="background-image:url({$value})"></div>
                            {/foreach}
                        </div>
                    </div>
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper swiper-wrapper_item">
                            {foreach $spotDetail.imgs as $key=>$value }
                            <div class="swiper-slide" style="background-image:url({$value})"></div>
                            {/foreach}
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-black"></div>
                        <div class="swiper-button-prev swiper-button-black"></div>
                    </div>
                </div>
                <div class="center">
                    <div class="title">{$spotDetail.title}</div>
                    <div class="intro">
                        <div>已售{$spotDetail.sales}件</div>
                        <div><a href="{:url('help/scenic_intro')}?id={$spotDetail.id}">景区介绍</a></div>
                    </div>
                    <div class="desc">
                        <div class="item">
                            <span>票价:</span>
                            <span class="price">￥<span>{$spotDetail.price}</span></span>
                        </div>
                        <div class="item">
                            <span>服务:</span>
                            <span>{if $spotDetail.state==1}正常营业{elseif $spotDetail.state==2}暂停营业{/if}</span>
                        </div>
                        <div class="item">
                            <span>地址:</span>
                            <span>{$spotDetail.address}</span>
                        </div>

                    </div>
                    <div class="num">
                        <div>数量:</div>
                        <div class="box">
                            <button class="buy_dec">-</button>
                            <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" type="number" name="buy_num" value="1">
                            <button class="buy_inc">+</button>
                        </div>
                    </div>
                    <div class="buy_now">
                        <div class="btn-group">
                            <div class="btn join" id="join_cart">加入购物车</div>
                        </div>
                        <div class="btn-group">
                            <div class="btn buy" id="buy_now">立即购买</div>
                        </div>
                    </div>
                    <div class="alert">
                        温馨提示：不支持退换货服务
                    </div>
                </div>
                <div class="fr">
                    <div class="top">--最新--</div>
                    {foreach $productNew as $key=>$value }
                    <div class="item">
                        <a href="{:url('scenic/scenic_detail')}?id={$value.id}"><img src="{$value.img}"></a>
                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{$value.title}</div>
                    </div>
                    {/foreach}
                </div>
            </div>
            <!-- 详情与评论 -->
            <div class="comment">
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                data-toggle="tab">商品详情</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                data-toggle="tab">用户评论</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div class="top">
                                <div>商品详情</div>
                            </div>
                            <div style="margin:auto 25px;">{$spotDetail.detail|raw}</div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div class="top evaluates">
                                <div>用户评价</div>
                            </div>
                            <div class="frs frs_more">
                                <span>加载更多</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <div class="f_top">
            <div class="typearea">
                <ul>
                    <li>
                        <img src="/static/home/img/b1.jpg" alt="">
                        <span>正品保障</span>
                    </li>
                    <li>
                        <img src="/static/home/img/b2.jpg" alt="">
                        <span>好评如潮</span>
                    </li>
                    <li>
                        <img src="/static/home/img/b3.jpg" alt="">
                        <span>闪电发货</span>
                    </li>
                    <li>
                        <img src="/static/home/img/b4.jpg" alt="">
                        <span>权威荣誉</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="f_center">
            <div class="typearea">
                <div class="contact">
                    <div class="con_t">
                        <img src="/static/home/img/b5.jpg" alt="">
                        <div class="con_tr ml_10">
                            <div>{$system.ser_tel}</div>
                            <div>服务时间：{$system.ser_time}</div>
                        </div>
                    </div>
                    <div class="mt_20">地址：{$system.address}</div>
                    <div class="mt_20">邮箱：{$system.email}</div>
                </div>
                <ul>
                    <li>购物指南</li>
                    <li><a href="javascript:0">我的购物车</a></li>
                    <li><a href="javascript:0">查看订单</a></li>
                    <li><a href="javascript:0">取消订单</a></li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="javascript:0">用户注册</a></li>
                    <li><a href="javascript:0">用户登录</a></li>
                    <li><a href="javascript:0">配送说明</a></li>
                </ul>
                <ul>
                    <li>服务保证</li>
                    <li><a href="javascript:0">产品质量保证</a></li>
                    <li><a href="javascript:0">售后服务保证</a></li>
                    <li><a href="javascript:0">联系我们</a></li>
                </ul>
                <div class="fr">
                    <div>
                        <div id="qy_qrcode">
                            
                        </div>
                        <p style="text-align:center;">企业官网</p>
                    </div>
                    <div class="ml_30">
                        <div id="shop_qrcode">
                            
                        </div>
                        <p style="text-align:center;">微信商城</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="f_bottom">
            <div class="typearea">
                版权所有 ©{$system.copyright}&nbsp;&nbsp;&nbsp;&nbsp;{$system.company}&nbsp;&nbsp;&nbsp;&nbsp;{$system.icp}
            </div>
        </div>
    </footer>
    <script src="/static/home/js/bootstrap/jquery.min.js"></script>
    <script src="/static/home/js/bootstrap/bootstrap.min.js"></script>
    <script src="/static/home/js/swiper.min.js"></script>
    <script src="/static/lib/layer/2.4/layer.js"></script>
    <script src="/static/home/js/qrcode.min.js"></script>
    <script type="text/javascript">

        var qrcode = new QRCode(document.getElementById("qy_qrcode"), {
            text: "{$url}/index/index/index.html",
            width: 88,
            height: 88,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });

        var qrcode = new QRCode(document.getElementById("shop_qrcode"), {
            text: "{$url}/h5/index.html",
            width: 88,
            height: 88,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        var page=1;
        var id=$("input[name=id]").val();
        $(function(){
            if(window.localStorage.getItem("Token")){
                $(".login_ing").css("display","none");
                $(".login_ed").css("display","unset");
            }
            $(".login_out").click(function() {
                window.localStorage.setItem("Token",'');
                $(".login_ing").css("display","unset");
                $(".login_ed").css("display","none");
                $.ajax({
                    type: 'POST',
                    url: "{:url('/shop/login/login_out')}",
                    data:{},
                    success: function(data){
                        window.location.replace(location.href);
                    },
                    error:function(data) {
                        console.log(data.msg);
                    },
                });
            });
            $(".buy_dec").click(function() {
                var buy_num=$("input[name=buy_num]").val();
                if(buy_num>=2){
                    buy_num--;
                }
                $("input[name=buy_num]").val(buy_num);
            });
            $(".buy_inc").click(function() {
                var buy_num=$("input[name=buy_num]").val();
                buy_num++;
                $("input[name=buy_num]").val(buy_num);
            });
            $.ajax({
                type: 'POST',
                url: 'evaluates',
                data:{p_id:id,page:page,type:2},
                success: function(data){
                    var evaluates_html='';
                    for (var i =  0; i < data.data.length; i++) {
                        if(data.data[i].headimgurl){
                            if(data.data[i].nickname){
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="'+data.data[i].headimgurl+'">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].nickname+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }else{
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="'+data.data[i].headimgurl+'">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].phone+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }
                        }else{
                            if(data.data[i].nickname){
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="/static/home/img/avatar.jpg">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].nickname+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }else{
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="/static/home/img/avatar.jpg">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].phone+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }
                        }
                        
                    }
                    $('.frs_more').before(evaluates_html);
                },
                error:function(data) {
                    layer.msg(data.msg,{icon:1,time:3000});
                },
            });
        });
        var index=0;
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });

        var swiper = new Swiper('.swiper-container-vertical', {
            direction: 'vertical',
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

        $(".frs_more").click(function() {
            page=page+1;
            $.ajax({
                type: 'POST',
                url: 'evaluates',
                data:{p_id:id,page:page,type:2},
                success: function(data){
                    var evaluates_html='';
                    for (var i =  0; i < data.data.length; i++) {
                        if(data.data[i].headimgurl){
                            if(data.data[i].nickname){
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="'+data.data[i].headimgurl+'">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].nickname+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }else{
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="'+data.data[i].headimgurl+'">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].phone+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }
                        }else{
                            if(data.data[i].nickname){
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="/static/home/img/avatar.jpg">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].nickname+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }else{
                                evaluates_html=evaluates_html
                                +'<div class="item">'
                                    +'<img src="/static/home/img/avatar.jpg">'
                                    +'<div class="info">'
                                        +'<div>'+data.data[i].phone+'</div>'
                                        +'<div>{$spotDetail.title}</div>'
                                        +'<div>'+data.data[i].message+'</div>'
                                    +'</div>'
                                    +'<div class="fr">'+data.data[i].time+'</div>'
                                +'</div>';
                            }
                        }
                        
                    }
                    $('.frs_more').before(evaluates_html);
                },
                error:function(data) {
                    layer.msg(data.msg,{icon:1,time:3000});
                },
            });
        });
        $("#search").click(function() {
            layer.load(1, {
              shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            var keyword=$("input[name=keyword]").val();
            window.location.href="{$url}/shop/scenic/scenic.html?keyword="+keyword
            ;
        });
        $("#join_cart").click(function() {
            if(window.localStorage.getItem("Token")){
                var token=window.localStorage.getItem("Token");
                var p_id=$("input[name=id]").val();
                var buy_num=$("input[name=buy_num]").val();
                $.ajax({
                    type: 'POST',
                    url: "{:url('api/carts/cartIn')}",
                    data: {token:token,type:2,p_id:p_id,buy_num:buy_num},
                    success: function(resdata){
                        if(resdata.code==200){
                            layer.msg(resdata.msg,{icon:1,time:1000});
                        }else{
                            layer.msg(resdata.msg,{icon:2,time:3000});
                        }
                    },
                    error: function(){
                        layer.msg('失败',{icon:2,time:3000});
                    }
                })
            }else{
                window.location.href="/shop/login/login.html";
            }
        });

        $("#buy_now").click(function() {
            if(window.localStorage.getItem("Token")){
                var p_id=$("input[name=id]").val();
                var buy_num=$("input[name=buy_num]").val();
                window.location.href="/shop/order/submit_order_spot.html?p_id="+p_id+"&buy_num="+buy_num+"&type=2";
            }else{
                window.location.href="/shop/login/login.html";
            }
        });
    </script>
</body>

</html>